<template>
  <div class="user-detail-container">
    <h3 class="module-title">👤 用户详情（来自远程应用）</h3>
    <div class="user-detail-card">
      <div class="detail-item">
        <label>用户ID：</label>
        <span>{{ userId }}</span>
      </div>
      <div class="detail-item">
        <label>用户姓名：</label>
        <span>{{ userName }}</span>
      </div>
      <div class="detail-item">
        <label>用户角色：</label>
        <span>{{ userRole }}</span>
      </div>
      <div class="detail-item">
        <label>状态：</label>
        <span :class="{ active: isActive }">
          {{ isActive ? '活跃' : '禁用' }}
        </span>
      </div>
      <div class="detail-item">
        <label>创建时间：</label>
        <span>{{ createTime }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 模拟用户数据
const userId = ref('U001')
const userName = ref('张三')
const userRole = ref('系统管理员')
const isActive = ref(true)
const createTime = ref('2023-01-15 10:30:00')

onMounted(() => {
  // 实际项目中，这里可以根据路由参数获取用户ID，然后请求用户详情
  console.log('加载用户详情组件')
})
</script>

<style scoped>
.user-detail-container {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.module-title {
  color: #333;
  margin-bottom: 20px;
  font-size: 18px;
}

.user-detail-card {
  background-color: white;
  border-radius: 4px;
  padding: 20px;
}

.detail-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-item label {
  width: 100px;
  color: #666;
  font-weight: 500;
}

.detail-item span {
  color: #333;
  flex: 1;
}

.detail-item span.active {
  color: #52c41a;
}
</style>